<template>
  <swiper
  :spaceBetween="30"
    :effect="'fade'"
    :navigation="true"
    :pagination="{
      clickable: true,
    }"
    :modules="modules"
    class="mySwiper"
  >
    <swiper-slide v-for="(item, index) in list" :key="index">
      <img :src="item.img" :alt="item.alt" />
    </swiper-slide>
  </swiper>
</template>
<script>
import { Pagination, Navigation ,EffectFade} from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/scss";
import 'swiper/scss/effect-fade';
import "swiper/scss/navigation";
import "swiper/scss/pagination";
export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      modules: [Pagination, Navigation,EffectFade],
    };
  },
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  methods: {},
};
</script>
<style lang="scss">
.swiper {
  height: 400px;
  .swiper-slide {
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain; // 原图的形状
    }
  }
}
</style>
